<template>
  <div id="root">
  <div class="todo-container">
  <div class="todo-wrap">
  <MyHeader :addTodo="addTodo"/>
  <MyList 
  :todos="todos" 
  :checkTodo="checkTodo" 
  :deleteTodo="deleteTodo" 
  />
  <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearDoneTodo="clearDoneTodo"/>
  </div>
  </div>
  </div>
</template>


<script>

// 1.组件化编码流程:
// (1).拆分静态组件:组件要按照功能点拆分，命名不要与html元素冲突
// (2).实现动态组件:考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用:
//   1).一个组件在用:放在组件自身即可
//   2).一些组件在用: 放在他们共同的父组件上 (状态提升)
// (3).实现交互:从绑定事件开始
// 2.props适用于:
// (1)父组件 ==>子组件通信
// (2).子组件 ==>父组件通信 (要求先给子一个函数)
// 3.使用v-model时要切记: v-model绑定的值不能是props传过来的值，因为props是不可以修改的!
// 4.props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
    import MyHeader from './components/MyHeader'
    import MyList from './components/MyList'
    import MyFooter from './components/MyFooter'
    export default {
        name: 'App',
        components:{
        MyHeader,
        MyList,
        MyFooter,
        MyFooter
        },
        data(){
            return{
                todos:[{
                    id: '001',
                    title:'抽烟',
                    done: true
                },{
                    id: '002',
                    title:'喝酒',
                    done: false
                },{
                    id: '003',
                    title:'吃饭',
                    done: true
                }]
            }
        },
        methods:{
          //添加todo
          addTodo(todoObj){
            this.todos.unshift(todoObj)
          },
          checkTodo(id){
            this.todos.forEach((todo)=>{
              if(todo.id === id) todo.done=!todo.done
            })
          },
          deleteTodo(id){
            this.todos=this.todos.filter(todo => todo.id!==id)
          },
          //全选或取消全选
          checkAllTodo(done){
            this.todos.forEach((todo)=>{
              todo.done=done;
            })
          },
          clearDoneTodo(){
            this.todos=this.todos.filter((todo)=>{
                return !todo.done
            })
          }
        }
    }
</script>
<style  lang="less">
 
 body{
  background: #ffff;
 }

 btn {
display: inline-block;
padding:4px 12px;
margin-bottom:0;
font-size:14px;
line-height:20px;
text-align: center;
vertical-align:middle;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255,255,0.2), 0 1px 2p  rgba(0,-0, 0,0.05);
border-radius:4px;
}

.btn-danger {color:#fff;background-color:#da4f49;border: 1px solid #bd362f;}
.btn-danger :hover {color:#fff;background-color:#bd362f;}
.btn:focus {
outline: none;
}
todo-container {width: 600px;
  margin:  auto;
}
.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style>